<template>
	<view class="view-contain">
		<public-module :title="title" />
		<view class="header">
			<view class="users">
<!-- 				<button class="login-button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true">
					<view class="user_name">
						{{user.userName?user.userName:'一键登录'}}
					</view>
				</button> -->
				<view class="user_name" @click="login">
					{{user.nickName?user.nickName:'点我登录'}}
				</view>
				<view class="user_schedule">
				</view>
			</view>
			<view class="avatarBox">
				<view class="avatar" @click="toUpdate">
					<u--image width="100px" height="100px" shape="circle"
						:src="user.userId ? user.avatar || require('@/static/img/logo.jpg') : ''"
						style="padding: 2px ;font-size: 0;border-radius: 50% ;border: 2px solid #B0E0DC ;"></u--image>
				</view>
			</view>
		</view>


		<view class="info_box">
			<u-grid :border="true" :col="3">
				<u-grid-item>
					<u-icon name="person-delete-fill" :size="22"></u-icon>
					<text class="grid-text" @click="toUpdate">个人信息</text>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="calendar-fill" :size="22"></u-icon>
					<text class="grid-text" @click="toIntegralDetail">积分记录</text>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="file-text-fill" :size="22"></u-icon>
					<text class="grid-text" @click="toStudyGroup">学习小组</text>
				</u-grid-item>
			</u-grid>
		</view>


		<view class="content">
			<view class="quit" @click="logOut">
				<u-button type="warning" shape="circle">退出登录</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		decryptPhone
	} from "@/config/api.js";
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				title: '个人中心'
			}
		},
		onShareAppMessage() {
			return {
				title: '苏榜小程序邀请您一起使用',
				imageUrl: "../../static/img/share.jpg",
				path: '/pages/index/index'
			}
		},
		computed: {
			...mapState(['user'])
		},
		onShow() {

		},
		methods: {
			...mapMutations(['emptyUserInfo','setToken', 'setUser']),
			toUpdate() {
				uni.navigateTo({
					url: '/pages/mine/components/add'
				})
			},
			login() {
				if (this.user.userId) {
					this.user.nickName = this.user.nickName || '点我登录';
					return
				}
				// 静默登录机制，直接跳转到首页
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			logOut() {
				this.emptyUserInfo()
			},
			toIntegralDetail() {
				uni.navigateTo({
					url: '/pages/mine/userIntegral/index'
				})
			},
			toStudyGroup() {
				uni.navigateTo({
					url: '/pages/studygroup/index'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding: 0;
		background-image: radial-gradient(60vw 60vw at 70% 100px, #D9F9F3, #f7f7f7, #F7F7F7);
	}

	.header {
		display: flex;
		width: 90%;
		margin: 10px auto;
		padding: 10px 2.5%;
		background: rgba(0, 0, 0, 0);
		border-radius: 8px;
	}

	.users {
		/* flex: 1; */
		width: 55%;
	}

	.user_name {
		font-size: 24px;
	}

	.user_info {
		font-size: 12px;
		padding: 15px 0 30px 0;
		color: #AEB6B3;
	}

	.user_schedule {
		display: flex;
		height: 30px;
		line-height: 30px;
	}

	.user_schedule_txt {
		width: 40px;
		text-align: center;
		background-image: linear-gradient(180deg, #57cbd6, #def5fb);
		border-top-left-radius: 10px;
		border-bottom-right-radius: 10px;
		height: 20px;
		line-height: 20px;
		font-size: 12px;
		color: #fff;
		margin-top: 5px;
	}

	.user_schedule_pro {
		flex: 1;
		padding-top: 13px;
	}

	.user_schedule {
		display: flex;
		height: 30px;
		line-height: 30px;
	}

	.user_schedule_txt {
		width: 40px;
		text-align: center;
		background-image: linear-gradient(180deg, #57cbd6, #def5fb);
		border-top-left-radius: 10px;
		border-bottom-right-radius: 10px;
		height: 20px;
		line-height: 20px;
		font-size: 12px;
		color: #fff;
		margin-top: 5px;
	}

	.user_schedule_pro {
		flex: 1;
		padding-top: 13px;
	}

	.avatarBox {
		flex: 1;
		display: block;
	}

	.avatarBox::after {
		display: block;
		content: " ";
		clear: both;
	}

	.avatar {
		float: right;
		text-align: right;
		position: relative;
	}

	.avatarTips {
		position: absolute;
		width: 100px;
		height: 100px;
		position: absolute;
		right: 4px;
		top: 4px;
		bottom: 4px;
		width: 100px;
		border-radius: 50%;
		overflow: hidden;

	}

	.avatarTipsTxt {
		position: absolute;
		background: rgba(0, 0, 0, 0.2);
		padding: 5px 0;
		text-align: center;
		color: #ffff;
		font-size: 12px;
		bottom: 0;
		width: 100px;
	}



	.view-contain {
		position: relative;

		.info {
			position: absolute;
			top: 200rpx;
			right: 24rpx;
		}

		.content {
			padding: 100rpx 40rpx 0;

			.avatar {
				.hd {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					overflow: hidden;
					margin: 0 auto;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.bd {
					font-size: 32rpx;
					color: #333333;
					text-align: center;
					margin-top: 24rpx;

					.margin-left-24 {
						margin-left: 24rpx;
					}
				}
			}

			.quit {
				margin-top: 100rpx;
			}
		}
	}

	.info_box {
		margin: 40px 0;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.login-button {
		background-color: transparent;
		color: #333;
		border: none !important;
		outline: none !important;
	}
</style>